<template>
  <div class="ht-table">
    <div :class="[showFooter ? 'table-box' : 'table--all-box']">
      <el-table
        ref="El_ElTable"
        :data="dataList"
        border
        v-bind="childrenProps"
        style="width: 100%"
        @row-click="rowClick"
        @select-all="selectAll"
      >
        <el-table-column
          v-if="showSelectColumn"
          type="selection"
          @selection-change="handleSelectionChange"
          width="50"
          align="center"
        />
        <el-table-column v-if="showIndexColumn" :index="indexAdd" type="index" label="序号" width="80" align="center" />
        <template v-for="propItem in propList" :key="propItem.prop">
          <!-- slotName 使用插槽 不提供  show-overflow-tooltip -->
          <el-table-column align="left" v-bind="propItem" :show-overflow-tooltip="!propItem.slotName">
            <template #default="scope">
              <slot :name="propItem.slotName" :row="scope.row">
                {{ scope.row[propItem.prop] ?? '- - -' }}
              </slot>
            </template>
          </el-table-column>
        </template>

        <!-- 数据为空时自定义的内容 -->
        <template #empty>
          <div class="empty_box">
            <slot name="empty">暂无数据</slot>
          </div>
        </template>
      </el-table>
    </div>

    <div class="footer" v-if="showFooter">
      <slot name="footer">
        <el-pagination
          background
          v-bind="paginationProps"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-size="page.pageSize"
          :page-sizes="[20, 30, 50]"
          layout="total, prev, pager, next, jumper"
          :total="listCount"
        >
        </el-pagination>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElTable } from 'element-plus'

type Ipage = {
  pageNum: number
  pageSize: number
}

type Props = {
  dataList: any[] // table 绑定值
  listCount?: number // list总数
  page?: Ipage // 分页数据
  propList: any[] // 遍历 el-table-column
  childrenProps: any // 具体参考 el-Table 属性
  paginationProps?: any // 具体参考 el-pagination 属性

  showSelectColumn: boolean // 选中栏显隐
  showIndexColumn: boolean // 序号栏显影
  showFooter: boolean // 分页显隐

  // 在此处添加要绑定的事件
  rowClick?: any
  selectAll?: any
}

const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  listCount: 10,
  page: () => ({ pageNum: 1, pageSize: 10 }),
  propList: () => [],
  childrenProps: () => ({}),

  showSelectColumn: true,
  showIndexColumn: true,
  showFooter: true
})

const El_ElTable = ref<InstanceType<typeof ElTable> | null>(null)
const emit = defineEmits(['selectionChange', 'RowClick', 'update:page'])

watch(
  () => props.childrenProps,
  (e) => {
    console.log(e)
  },
  {
    deep: true
  }
)

const handleSelectionChange = (value: any) => {
  emit('selectionChange', value)
}
const handleCurrentChange = (pageNum: any) => {
  emit('update:page', { ...props.page, pageNum })
}

const handleSizeChange = (pageSize: any) => {
  emit('update:page', { ...props.page, pageSize })
}

// 催还序号递增
const indexAdd = (index: number) => {
  const page = props.page.pageNum // 当前页码
  const pagesize = props.page.pageSize // 每页条数
  return index + 1 + (page - 1) * pagesize
}

defineExpose({ El_ElTable })
</script>

<style scoped lang="less">
.ht-table {
  width: 100%;
  height: 100%;
  :deep(.el-popper.is-dark) {
    max-width: 25vw;
  }

  .empty_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.table-box {
  width: 100%;
  height: calc(100% - 72px);
}

.table--all-box {
  width: 100%;
  height: 100%;
}

.el-table {
  /* 表格高度设置 */
  height: 100% !important;

  // 暂无数据居中
  :deep(.el-scrollbar__view) {
    height: 100%;
  }
}

.footer {
  margin: 20px 0 20px 0;
  display: flex;
  justify-content: flex-end;

  .el-pagination {
    text-align: right;
  }
}
</style>
